<!DOCTYPE html>
<html style="height: 100%;">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="resource/css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="resource/css/api_index.css"/>
    </head>
    <body style="min-width: 1000px;">
        <div class="pk-index-left">
            <iframe src="nav.html"></iframe>
        </div>
        <div class="pk-index-right">
            <iframe src="" id="api_iframe" name="api_iframe"></iframe>
        </div>
        <div class="pk-index-bottom">
            <ul>
                <li>W3school: <a href="http://www.w3school.com.cn/js/index.asp">http://www.w3school.com.cn/js/index.asp</a></li>
                <li>JavaScript: The Definitive Guide</li>
            </ul>
            <div class="pk-index-bottom-title">
                <span>REFERENCE</span>
            </div>
            <div class="pk-index-bottom-hide">
                <a href="javascript:" id="bottomHide">↓Hide</a>
            </div>
        </div>
        <script type="text/javascript">
            document.getElementById('bottomHide').onclick = function(){
                if(this.innerHTML == '↓Hide'){
                    this.parentNode.parentNode.style.bottom = '-70px';
                    this.innerHTML = '↑Show';
                }else{
                    this.parentNode.parentNode.style.bottom = 0;
                    this.innerHTML = '↓Hide';
                }
            }
            setTimeout(function(){
                var tg = document.getElementById('bottomHide');
                if(tg.innerHTML == '↓Hide'){
                    tg.parentNode.parentNode.style.bottom = '-70px';
                    tg.innerHTML = '↑Show';
                }
            }, 5000);
        </script>
    </body>
</html>
